<!DOCTYPE html>
<html lang="zh">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>菜单配置 | vue-next-admin</title>
    <meta name="description" content="🎉🎉🔥基于vue3.x 、Typescript、vite、Element plus等，适配手机、平板、pc 的后台开源免费模板库（vue2.x请切换vue-prev-admin分支）开发文档">
    <link rel="stylesheet" href="/vue-next-admin-doc-preview/assets/style.5cebb62a.css">
    <link rel="modulepreload" href="/vue-next-admin-doc-preview/assets/Home.d1c70b92.js">
    <link rel="modulepreload" href="/vue-next-admin-doc-preview/assets/AlgoliaSearchBox.56b5b4ad.js">
    <link rel="modulepreload" href="/vue-next-admin-doc-preview/assets/app.9cc95a61.js">
    <link rel="modulepreload" href="/vue-next-admin-doc-preview/assets/config_menu_index.md.ba743976.lean.js">
    
    <link rel="icon" href="/vue-next-admin-doc-preview/images/favicon.ico">
  <meta name="keywords" content="doc、vue-next-admin、vue-next-admin-doc、vue3、element-plus、vuejs/vue-next">
  <meta name="description" content="🎉🎉🔥基于vue3.x 、Typescript、vite、Element plus等，适配手机、平板、pc 的后台开源免费模板库（vue2.x请切换vue-prev-admin分支）开发文档">
  <script>var _hmt=_hmt||[];(function(){var e=document.createElement("script");e.src="https://hm.baidu.com/hm.js?dd9ada7b25f65a181a42780f04b764e6";var t=document.getElementsByTagName("script")[0];t.parentNode.insertBefore(e,t)})();</script>
  <meta name="twitter:title" content="菜单配置 | vue-next-admin">
  <meta property="og:title" content="菜单配置 | vue-next-admin">
  </head>
  <body>
    <div id="app"><!--[--><div class="theme"><header class="nav-bar" data-v-fcf5c4a8><div class="sidebar-button" data-v-fcf5c4a8><svg class="icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" viewBox="0 0 448 512"><path fill="currentColor" d="M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z" class></path></svg></div><a class="nav-bar-title" href="/vue-next-admin-doc-preview/" aria-label="vue-next-admin, back to home" data-v-fcf5c4a8 data-v-4424da2c><img class="logo" src="/vue-next-admin-doc-preview/images/logo-mini.svg" alt="Logo" data-v-4424da2c> vue-next-admin</a><div class="flex-grow" data-v-fcf5c4a8></div><div class="nav" data-v-fcf5c4a8><nav class="nav-links" data-v-fcf5c4a8 data-v-107a016c><!--[--><div class="item" data-v-107a016c><div class="nav-link" data-v-107a016c data-v-e720f45e><a class="item" href="/vue-next-admin-doc-preview/home/" data-v-e720f45e>指南 <!----></a></div></div><div class="item" data-v-107a016c><div class="nav-link" data-v-107a016c data-v-e720f45e><a class="item active" href="/vue-next-admin-doc-preview/config/" data-v-e720f45e>配置参考 <!----></a></div></div><div class="item" data-v-107a016c><div class="nav-dropdown-link" data-v-107a016c data-v-719eac16><button class="button" data-v-719eac16><span class="button-text" data-v-719eac16>集成后端</span><span class="right button-arrow" data-v-719eac16></span></button><ul class="dialog" data-v-719eac16><!--[--><li class="dialog-item" data-v-719eac16><div class="nav-dropdown-link-item" data-v-719eac16 data-v-43c736e2><a class="item isExternal" href="https://github.com/PandaGoAdmin/PandaX" target="_blank" rel="noopener noreferrer" data-v-43c736e2><span class="arrow" data-v-43c736e2></span><span class="text" data-v-43c736e2>@熊猫 PandaGoAdmin</span><span class="icon" data-v-43c736e2><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15" data-v-43c736e2><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></span></a></div></li><li class="dialog-item" data-v-719eac16><div class="nav-dropdown-link-item" data-v-719eac16 data-v-43c736e2><a class="item isExternal" href="https://www.gnet.top/public" target="_blank" rel="noopener noreferrer" data-v-43c736e2><span class="arrow" data-v-43c736e2></span><span class="text" data-v-43c736e2>@甜蜜蜜 GoPro平台</span><span class="icon" data-v-43c736e2><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15" data-v-43c736e2><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></span></a></div></li><!--]--></ul></div></div><div class="item" data-v-107a016c><div class="nav-dropdown-link" data-v-107a016c data-v-719eac16><button class="button" data-v-719eac16><span class="button-text" data-v-719eac16>线上演示</span><span class="right button-arrow" data-v-719eac16></span></button><ul class="dialog" data-v-719eac16><!--[--><li class="dialog-item" data-v-719eac16><div class="nav-dropdown-link-item" data-v-719eac16 data-v-43c736e2><a class="item isExternal" href="https://lyt-top.gitee.io/vue-next-admin-preview/#/login" target="_blank" rel="noopener noreferrer" data-v-43c736e2><span class="arrow" data-v-43c736e2></span><span class="text" data-v-43c736e2>vue3.x 版本预览（vue-next-admin）</span><span class="icon" data-v-43c736e2><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15" data-v-43c736e2><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></span></a></div></li><li class="dialog-item" data-v-719eac16><div class="nav-dropdown-link-item" data-v-719eac16 data-v-43c736e2><a class="item isExternal" href="https://lyt-top.gitee.io/vue-prev-admin-preview/#/login" target="_blank" rel="noopener noreferrer" data-v-43c736e2><span class="arrow" data-v-43c736e2></span><span class="text" data-v-43c736e2>vue2.x 版本预览（vue-prev-admin）</span><span class="icon" data-v-43c736e2><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15" data-v-43c736e2><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></span></a></div></li><!--]--></ul></div></div><div class="item" data-v-107a016c><div class="nav-link" data-v-107a016c data-v-e720f45e><a class="item isExternal" href="https://gitee.com/lyt-top/vue-next-admin/blob/master/CHANGELOG.md" target="_blank" rel="noopener noreferrer" data-v-e720f45e>更新日志 <svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15" data-v-e720f45e><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></div></div><div class="item" data-v-107a016c><div class="nav-dropdown-link" data-v-107a016c data-v-719eac16><button class="button" data-v-719eac16><span class="button-text" data-v-719eac16>代码仓库</span><span class="right button-arrow" data-v-719eac16></span></button><ul class="dialog" data-v-719eac16><!--[--><li class="dialog-item" data-v-719eac16><div class="nav-dropdown-link-item" data-v-719eac16 data-v-43c736e2><a class="item isExternal" href="https://gitee.com/lyt-top/vue-next-admin" target="_blank" rel="noopener noreferrer" data-v-43c736e2><span class="arrow" data-v-43c736e2></span><span class="text" data-v-43c736e2>gitee（国内：实时更新）</span><span class="icon" data-v-43c736e2><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15" data-v-43c736e2><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></span></a></div></li><li class="dialog-item" data-v-719eac16><div class="nav-dropdown-link-item" data-v-719eac16 data-v-43c736e2><a class="item isExternal" href="https://github.com/lyt-Top/vue-next-admin" target="_blank" rel="noopener noreferrer" data-v-43c736e2><span class="arrow" data-v-43c736e2></span><span class="text" data-v-43c736e2>github（国外：定期更新）</span><span class="icon" data-v-43c736e2><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15" data-v-43c736e2><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></span></a></div></li><!--]--></ul></div></div><!--]--><!----><div class="item" data-v-107a016c><div class="nav-link" data-v-107a016c data-v-e720f45e><a class="item isExternal" href="https://gitee.com/lyt-top/vue-next-admin-doc" target="_blank" rel="noopener noreferrer" data-v-e720f45e>文档仓库 <svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15" data-v-e720f45e><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></div></div></nav></div><!--[--><!--[--><div class="algolia-search-box" id="docsearch"></div><!--]--><!--]--></header><aside class="sidebar" data-v-34c05c3a><nav class="nav-links nav" data-v-34c05c3a data-v-107a016c><!--[--><div class="item" data-v-107a016c><div class="nav-link" data-v-107a016c data-v-e720f45e><a class="item" href="/vue-next-admin-doc-preview/home/" data-v-e720f45e>指南 <!----></a></div></div><div class="item" data-v-107a016c><div class="nav-link" data-v-107a016c data-v-e720f45e><a class="item active" href="/vue-next-admin-doc-preview/config/" data-v-e720f45e>配置参考 <!----></a></div></div><div class="item" data-v-107a016c><div class="nav-dropdown-link" data-v-107a016c data-v-719eac16><button class="button" data-v-719eac16><span class="button-text" data-v-719eac16>集成后端</span><span class="right button-arrow" data-v-719eac16></span></button><ul class="dialog" data-v-719eac16><!--[--><li class="dialog-item" data-v-719eac16><div class="nav-dropdown-link-item" data-v-719eac16 data-v-43c736e2><a class="item isExternal" href="https://github.com/PandaGoAdmin/PandaX" target="_blank" rel="noopener noreferrer" data-v-43c736e2><span class="arrow" data-v-43c736e2></span><span class="text" data-v-43c736e2>@熊猫 PandaGoAdmin</span><span class="icon" data-v-43c736e2><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15" data-v-43c736e2><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></span></a></div></li><li class="dialog-item" data-v-719eac16><div class="nav-dropdown-link-item" data-v-719eac16 data-v-43c736e2><a class="item isExternal" href="https://www.gnet.top/public" target="_blank" rel="noopener noreferrer" data-v-43c736e2><span class="arrow" data-v-43c736e2></span><span class="text" data-v-43c736e2>@甜蜜蜜 GoPro平台</span><span class="icon" data-v-43c736e2><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15" data-v-43c736e2><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></span></a></div></li><!--]--></ul></div></div><div class="item" data-v-107a016c><div class="nav-dropdown-link" data-v-107a016c data-v-719eac16><button class="button" data-v-719eac16><span class="button-text" data-v-719eac16>线上演示</span><span class="right button-arrow" data-v-719eac16></span></button><ul class="dialog" data-v-719eac16><!--[--><li class="dialog-item" data-v-719eac16><div class="nav-dropdown-link-item" data-v-719eac16 data-v-43c736e2><a class="item isExternal" href="https://lyt-top.gitee.io/vue-next-admin-preview/#/login" target="_blank" rel="noopener noreferrer" data-v-43c736e2><span class="arrow" data-v-43c736e2></span><span class="text" data-v-43c736e2>vue3.x 版本预览（vue-next-admin）</span><span class="icon" data-v-43c736e2><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15" data-v-43c736e2><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></span></a></div></li><li class="dialog-item" data-v-719eac16><div class="nav-dropdown-link-item" data-v-719eac16 data-v-43c736e2><a class="item isExternal" href="https://lyt-top.gitee.io/vue-prev-admin-preview/#/login" target="_blank" rel="noopener noreferrer" data-v-43c736e2><span class="arrow" data-v-43c736e2></span><span class="text" data-v-43c736e2>vue2.x 版本预览（vue-prev-admin）</span><span class="icon" data-v-43c736e2><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15" data-v-43c736e2><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></span></a></div></li><!--]--></ul></div></div><div class="item" data-v-107a016c><div class="nav-link" data-v-107a016c data-v-e720f45e><a class="item isExternal" href="https://gitee.com/lyt-top/vue-next-admin/blob/master/CHANGELOG.md" target="_blank" rel="noopener noreferrer" data-v-e720f45e>更新日志 <svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15" data-v-e720f45e><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></div></div><div class="item" data-v-107a016c><div class="nav-dropdown-link" data-v-107a016c data-v-719eac16><button class="button" data-v-719eac16><span class="button-text" data-v-719eac16>代码仓库</span><span class="right button-arrow" data-v-719eac16></span></button><ul class="dialog" data-v-719eac16><!--[--><li class="dialog-item" data-v-719eac16><div class="nav-dropdown-link-item" data-v-719eac16 data-v-43c736e2><a class="item isExternal" href="https://gitee.com/lyt-top/vue-next-admin" target="_blank" rel="noopener noreferrer" data-v-43c736e2><span class="arrow" data-v-43c736e2></span><span class="text" data-v-43c736e2>gitee（国内：实时更新）</span><span class="icon" data-v-43c736e2><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15" data-v-43c736e2><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></span></a></div></li><li class="dialog-item" data-v-719eac16><div class="nav-dropdown-link-item" data-v-719eac16 data-v-43c736e2><a class="item isExternal" href="https://github.com/lyt-Top/vue-next-admin" target="_blank" rel="noopener noreferrer" data-v-43c736e2><span class="arrow" data-v-43c736e2></span><span class="text" data-v-43c736e2>github（国外：定期更新）</span><span class="icon" data-v-43c736e2><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15" data-v-43c736e2><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></span></a></div></li><!--]--></ul></div></div><!--]--><!----><div class="item" data-v-107a016c><div class="nav-link" data-v-107a016c data-v-e720f45e><a class="item isExternal" href="https://gitee.com/lyt-top/vue-next-admin-doc" target="_blank" rel="noopener noreferrer" data-v-e720f45e>文档仓库 <svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15" data-v-e720f45e><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></div></div></nav><!--[--><!--]--><ul class="sidebar-links" data-v-34c05c3a><!--[--><li class="sidebar-link"><p class="sidebar-link-item">基础</p><ul class="sidebar-links"><li class="sidebar-link"><a class="sidebar-link-item" href="/vue-next-admin-doc-preview/config/">简介</a><!----></li><li class="sidebar-link"><a class="sidebar-link-item active" href="/vue-next-admin-doc-preview/config/menu/">菜单配置</a><ul class="sidebar-links"><li class="sidebar-link"><a class="sidebar-link-item" href="#参数说明">参数说明</a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="#菜单格式">菜单格式</a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="#路径格式">路径格式</a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="#一级菜单">一级菜单</a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="#二级菜单">二级菜单</a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="#多级嵌套菜单">多级嵌套菜单</a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="#后端接口菜单">后端接口菜单</a><!----></li></ul></li><li class="sidebar-link"><a class="sidebar-link-item" href="/vue-next-admin-doc-preview/config/layoutConfig/">布局配置</a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="/vue-next-admin-doc-preview/config/iconfont/">字体图标</a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="/vue-next-admin-doc-preview/config/server/">服务端交互</a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="/vue-next-admin-doc-preview/config/vuex/">vuex</a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="/vue-next-admin-doc-preview/config/build/">打包预览</a><!----></li></ul></li><li class="sidebar-link"><p class="sidebar-link-item">高级</p><ul class="sidebar-links"><li class="sidebar-link"><a class="sidebar-link-item" href="/vue-next-admin-doc-preview/config/power/">权限管理</a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="/vue-next-admin-doc-preview/config/route/">路由参数</a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="/vue-next-admin-doc-preview/config/i18n/">国际化</a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="/vue-next-admin-doc-preview/config/tagsView/">标签页</a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="/vue-next-admin-doc-preview/config/directive/">内置指令</a><!----></li></ul></li><li class="sidebar-link"><p class="sidebar-link-item">其它</p><ul class="sidebar-links"><li class="sidebar-link"><a class="sidebar-link-item" href="/vue-next-admin-doc-preview/config/charts/">数据可视化</a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="/vue-next-admin-doc-preview/config/tool/">工具类集合</a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="/vue-next-admin-doc-preview/config/partyPlug/">第三方插件使用</a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="/vue-next-admin-doc-preview/config/builtPlug/">内置插件的使用</a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="/vue-next-admin-doc-preview/config/otherIssues/">其它问题</a><!----></li></ul></li><li class="sidebar-link"><p class="sidebar-link-item">赞助</p><ul class="sidebar-links"><li class="sidebar-link"><a class="sidebar-link-item" href="/vue-next-admin-doc-preview/config/support/">支持开源</a><!----></li></ul></li><!--]--></ul><!--[--><!--]--></aside><div class="sidebar-mask"></div><main class="page" data-v-1c2e469b><div class="container" data-v-1c2e469b><!--[--><!--]--><div style="position:relative;" class="content" data-v-1c2e469b><div><h1 id="菜单配置" tabindex="-1">菜单配置 <a class="header-anchor" href="#菜单配置" aria-hidden="true">#</a></h1><div class="tip custom-block"><p class="custom-block-title">温馨提示</p><p>先不着急上手，首先得了解各参数字段是啥意思，菜单路径地址：<a href="https://gitee.com/lyt-top/vue-next-admin/blob/master/src/router/route.ts" target="_blank" rel="noopener noreferrer">/@/router/route.ts</a>。也可看对应的 <a href="https://next.router.vuejs.org/zh/api/#beforeenter" target="_blank" rel="noopener noreferrer">next.router API 参考文档</a> ❤️。</p><ul><li><p>前端控制：<code>/@/router/route.ts</code> 修改菜单数据</p></li><li><p>后端控制：需先去 <code>/@/store/modules/themeConfig.ts</code> 下开启 <code>isRequestRoutes: true</code>，然后去 <code>/@/api/menu/index.ts</code> 中修改接口拿菜单数据</p></li></ul></div><blockquote><p>以下内容为国际化，想了解更多，请移步 <a href="/config/i18n/">高级-国际化</a></p></blockquote><h2 id="参数说明" tabindex="-1">参数说明 <a class="header-anchor" href="#参数说明" aria-hidden="true">#</a></h2><div class="language-ts"><pre><code><span class="token punctuation">{</span>
  <span class="token comment">// 菜单路径，用于跳转</span>
  path<span class="token operator">:</span> <span class="token string">&#39;/home&#39;</span><span class="token punctuation">,</span>
  <span class="token comment">// 菜单 name，用于界面 keep-alive 路由缓存。</span>
  <span class="token comment">// 此 name 需要与 component 组件中的 name 值相同（唯一）</span>
  name<span class="token operator">:</span> <span class="token string">&#39;home&#39;</span><span class="token punctuation">,</span>
  <span class="token comment">// 组件路径</span>
  <span class="token function-variable function">component</span><span class="token operator">:</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token keyword">import</span><span class="token punctuation">(</span><span class="token string">&#39;/@/views/home/index.vue&#39;</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
  <span class="token comment">// 附加自定义数据</span>
  meta<span class="token operator">:</span> <span class="token punctuation">{</span>
    <span class="token comment">// 菜单标题（国际化写法）</span>
    title<span class="token operator">:</span> <span class="token string">&#39;message.router.home&#39;</span><span class="token punctuation">,</span>
    <span class="token comment">// 菜单外链链接</span>
    <span class="token comment">// 开启外链条件，`1、isLink: true 2、链接地址不为空（meta.isLink） 3、isIframe: false`</span>
    isLink<span class="token operator">:</span> <span class="token string">&#39;&#39;</span><span class="token punctuation">,</span>
    <span class="token comment">// 菜单是否隐藏（菜单不显示在界面，但可以进行跳转）</span>
    isHide<span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span>
    <span class="token comment">// 菜单是否缓存</span>
    isKeepAlive<span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
    <span class="token comment">// 菜单是否固定（固定在 tagsView 中，不可进行关闭），右键菜单无 `关闭` 项</span>
    isAffix<span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
    <span class="token comment">// 是否内嵌</span>
    <span class="token comment">// 开启条件，`1、isIframe: true 2、链接地址不为空（meta.isLink）`</span>
    isIframe<span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span>
    <span class="token comment">// 当前路由权限标识，取角色管理。控制路由显示、隐藏。超级管理员：admin 普通角色：common</span>
    <span class="token comment">// 之前 auth 取用户（角色下有多个用户）</span>
    roles<span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">&#39;admin&#39;</span><span class="token punctuation">,</span> <span class="token string">&#39;common&#39;</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
    <span class="token comment">// 菜单图标</span>
    icon<span class="token operator">:</span> <span class="token string">&#39;iconfont icon-shouye&#39;</span><span class="token punctuation">,</span>
    <span class="token comment">// 自行再添加</span>
    <span class="token operator">...</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span>
</code></pre></div><h2 id="菜单格式" tabindex="-1">菜单格式 <a class="header-anchor" href="#菜单格式" aria-hidden="true">#</a></h2><blockquote><p>在项目 <code>/@/router/route.ts</code> 文件中。这里需要注意，菜单数据内容必须嵌套进顶级节点（作为顶级路由出口）的 <code>children</code> 字段里</p></blockquote><div class="language-ts"><pre><code><span class="token punctuation">{</span>
  <span class="token comment">// 顶级菜单路径</span>
  path<span class="token operator">:</span> <span class="token string">&#39;/&#39;</span><span class="token punctuation">,</span>
  <span class="token comment">// 顶级菜单 name</span>
  name<span class="token operator">:</span> <span class="token string">&#39;/&#39;</span><span class="token punctuation">,</span>
  <span class="token comment">// 顶级路由出口</span>
  <span class="token function-variable function">component</span><span class="token operator">:</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token keyword">import</span><span class="token punctuation">(</span><span class="token string">&#39;/@/layout/index.vue&#39;</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
  <span class="token comment">// 顶级菜单重定向路径</span>
  redirect<span class="token operator">:</span> <span class="token string">&#39;/home&#39;</span><span class="token punctuation">,</span>
  <span class="token comment">// 顶级附加自定义数据</span>
  meta<span class="token operator">:</span> <span class="token punctuation">{</span>
    <span class="token comment">// 顶级菜单是否缓存</span>
    isKeepAlive<span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
  <span class="token comment">// 顶级菜单的子级菜单数据</span>
  children<span class="token operator">:</span> <span class="token punctuation">[</span>
    <span class="token comment">// 新增的菜单对象写在这里</span>
    <span class="token punctuation">{</span>
      <span class="token operator">...</span>
    <span class="token punctuation">}</span>
  <span class="token punctuation">]</span>
<span class="token punctuation">}</span>
</code></pre></div><h2 id="路径格式" tabindex="-1">路径格式 <a class="header-anchor" href="#路径格式" aria-hidden="true">#</a></h2><blockquote><p>1.1、在项目 <code>/@/router/route.ts</code> 文件中，观察 <code>path</code> 字段，有 <code>children</code> 时，<code>path</code> 字段是基于上一级继续拼接（为什么这样？详看 <a href="/config/layoutConfig/#breadcrumb-面包屑">布局配置-breadcrumb-面包屑</a>），如下所示：<code>/params/xxx</code>，这样做是为了 <code>breadcrumb-面包屑</code> 的显示问题。</p></blockquote><div class="language-ts"><pre><code><span class="token punctuation">{</span>
  path<span class="token operator">:</span> <span class="token string">&#39;/params&#39;</span><span class="token punctuation">,</span>
  redirect<span class="token operator">:</span> <span class="token string">&#39;/params/common&#39;</span><span class="token punctuation">,</span>
  <span class="token operator">...</span><span class="token punctuation">,</span>
  children<span class="token operator">:</span> <span class="token punctuation">[</span>
    <span class="token punctuation">{</span>
      <span class="token comment">// 面包屑：首页 / 路由参数 / 普通路由</span>
      path<span class="token operator">:</span> <span class="token string">&#39;/params/common&#39;</span><span class="token punctuation">,</span>
      <span class="token operator">...</span><span class="token punctuation">,</span>
    <span class="token punctuation">}</span><span class="token punctuation">,</span>
    <span class="token punctuation">{</span>
      <span class="token comment">// 面包屑：首页 / 路由参数 / 普通路由 / 普通路由详情</span>
      path<span class="token operator">:</span> <span class="token string">&#39;/params/common/details&#39;</span><span class="token punctuation">,</span>
      <span class="token operator">...</span>
    <span class="token punctuation">}</span><span class="token punctuation">,</span>
  <span class="token punctuation">]</span>
<span class="token punctuation">}</span>
</code></pre></div><blockquote><p>1.2、如果这样写：</p></blockquote><div class="language-ts"><pre><code><span class="token punctuation">{</span>
  path<span class="token operator">:</span> <span class="token string">&#39;/params&#39;</span><span class="token punctuation">,</span>
  redirect<span class="token operator">:</span> <span class="token string">&#39;/params/common&#39;</span><span class="token punctuation">,</span>
  <span class="token operator">...</span><span class="token punctuation">,</span>
  children<span class="token operator">:</span> <span class="token punctuation">[</span>
    <span class="token punctuation">{</span>
      <span class="token comment">// 面包屑：首页 / 路由参数 / 普通路由</span>
      path<span class="token operator">:</span> <span class="token string">&#39;/params/common&#39;</span><span class="token punctuation">,</span>
      <span class="token operator">...</span><span class="token punctuation">,</span>
    <span class="token punctuation">}</span><span class="token punctuation">,</span>
    <span class="token punctuation">{</span>
      <span class="token comment">// 面包屑：首页 / 路由参数 / 普通路由详情</span>
      path<span class="token operator">:</span> <span class="token string">&#39;/params/details&#39;</span><span class="token punctuation">,</span>
      <span class="token operator">...</span>
    <span class="token punctuation">}</span><span class="token punctuation">,</span>
    <span class="token punctuation">{</span>
      <span class="token comment">// 面包屑：首页</span>
      path<span class="token operator">:</span> <span class="token string">&#39;/params1/common1/details&#39;</span><span class="token punctuation">,</span>
      <span class="token operator">...</span>
    <span class="token punctuation">}</span><span class="token punctuation">,</span>
  <span class="token punctuation">]</span>
<span class="token punctuation">}</span>
</code></pre></div><h2 id="一级菜单" tabindex="-1">一级菜单 <a class="header-anchor" href="#一级菜单" aria-hidden="true">#</a></h2><p style="font-weight:bold;">一、新建文件夹</p><blockquote><p>1.1、一般情况下，我们添加菜单时，代码都是在编译中（cnpm run dev）。所以我们先新增文件夹，后再添加代码到 <code>/@/router/route.ts</code> 文件中，防止需要重新再运行项目。<code>/@/views</code> 下新增 <code>personal</code> 文件夹</p></blockquote><img src="https://img-blog.csdnimg.cn/3ba519fd2d0e47a2ab10c6a7f2f03d67.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAbHl0LXRvcA==,size_12,color_FFFFFF,t_70,g_se,x_16"><blockquote><p>1.2、index.vue，注意 <code>name</code> 值需与 <code>/@/router/route.ts</code> 中的 <code>name</code> 值一致，否则实现不了路由的缓存（keep-alive）</p></blockquote><div class="language-ts"><div class="highlight-lines"><br><br><br><br><br><br><br><br><br><br><div class="highlighted"> </div><br><br><br><br><br><br><br><br><br><br><br><br></div><pre><code><span class="token operator">&lt;</span>template<span class="token operator">&gt;</span>
  <span class="token operator">&lt;</span>div <span class="token keyword">class</span><span class="token operator">=</span><span class="token string">&quot;personal&quot;</span><span class="token operator">&gt;</span>
    personal
    <span class="token operator">...</span>
  <span class="token operator">&lt;</span><span class="token operator">/</span>div<span class="token operator">&gt;</span>
<span class="token operator">&lt;</span><span class="token operator">/</span>template<span class="token operator">&gt;</span>

<span class="token operator">&lt;</span>script lang<span class="token operator">=</span><span class="token string">&quot;ts&quot;</span><span class="token operator">&gt;</span>
<span class="token keyword">import</span> <span class="token punctuation">{</span> reactive<span class="token punctuation">,</span> toRefs<span class="token punctuation">,</span> defineComponent <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;vue&#39;</span><span class="token punctuation">;</span>
<span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token function">defineComponent</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
  name<span class="token operator">:</span> <span class="token string">&#39;personal&#39;</span><span class="token punctuation">,</span>
  <span class="token function">setup</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">const</span> state <span class="token operator">=</span> <span class="token function">reactive</span><span class="token punctuation">(</span><span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token keyword">return</span> <span class="token punctuation">{</span>
      <span class="token operator">...</span><span class="token function">toRefs</span><span class="token punctuation">(</span>state<span class="token punctuation">)</span><span class="token punctuation">,</span>
    <span class="token punctuation">}</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

<span class="token operator">&lt;</span>style scoped lang<span class="token operator">=</span><span class="token string">&quot;scss&quot;</span><span class="token operator">&gt;</span>
<span class="token punctuation">.</span>personal <span class="token punctuation">{</span><span class="token punctuation">}</span>
<span class="token operator">&lt;</span><span class="token operator">/</span>style<span class="token operator">&gt;</span>
</code></pre></div><p style="font-weight:bold;">二、新增代码</p><blockquote><p>在项目 <code>/@/router/route.ts</code> 文件中，比如我们上面添加个人中心界面，新增如下代码：</p></blockquote><div class="language-ts"><div class="highlight-lines"><br><br><br><br><br><br><br><br><br><br><div class="highlighted"> </div><div class="highlighted"> </div><div class="highlighted"> </div><div class="highlighted"> </div><div class="highlighted"> </div><div class="highlighted"> </div><div class="highlighted"> </div><div class="highlighted"> </div><div class="highlighted"> </div><div class="highlighted"> </div><div class="highlighted"> </div><div class="highlighted"> </div><div class="highlighted"> </div><div class="highlighted"> </div><div class="highlighted"> </div><br><br><br></div><pre><code><span class="token punctuation">{</span>
  path<span class="token operator">:</span> <span class="token string">&#39;/&#39;</span><span class="token punctuation">,</span>
  name<span class="token operator">:</span> <span class="token string">&#39;/&#39;</span><span class="token punctuation">,</span>
  <span class="token function-variable function">component</span><span class="token operator">:</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token keyword">import</span><span class="token punctuation">(</span><span class="token string">&#39;/@/layout/index.vue&#39;</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
  redirect<span class="token operator">:</span> <span class="token string">&#39;/home&#39;</span><span class="token punctuation">,</span>
  meta<span class="token operator">:</span> <span class="token punctuation">{</span>
    isKeepAlive<span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
  children<span class="token operator">:</span> <span class="token punctuation">[</span>
    <span class="token comment">// 新增的菜单对象写在这里</span>
    <span class="token punctuation">{</span>
      path<span class="token operator">:</span> <span class="token string">&#39;/personal&#39;</span><span class="token punctuation">,</span>
      name<span class="token operator">:</span> <span class="token string">&#39;personal&#39;</span><span class="token punctuation">,</span>
      <span class="token function-variable function">component</span><span class="token operator">:</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token keyword">import</span><span class="token punctuation">(</span><span class="token string">&#39;/@/views/personal/index.vue&#39;</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
      meta<span class="token operator">:</span> <span class="token punctuation">{</span>
        title<span class="token operator">:</span> <span class="token string">&#39;message.router.personal&#39;</span><span class="token punctuation">,</span>
        isLink<span class="token operator">:</span> <span class="token string">&#39;&#39;</span><span class="token punctuation">,</span>
        isHide<span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span>
        isKeepAlive<span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
        isAffix<span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span>
        isIframe<span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span>
        roles<span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">&#39;admin&#39;</span><span class="token punctuation">,</span> <span class="token string">&#39;common&#39;</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
        icon<span class="token operator">:</span> <span class="token string">&#39;iconfont icon-gerenzhongxin&#39;</span><span class="token punctuation">,</span>
      <span class="token punctuation">}</span><span class="token punctuation">,</span>
    <span class="token punctuation">}</span><span class="token punctuation">,</span>
  <span class="token punctuation">]</span>
<span class="token punctuation">}</span>
</code></pre></div><p style="font-weight:bold;">三、界面显示</p><blockquote><p>去 <code>http://localhost:8888/</code> 中查看显示效果，如下：</p></blockquote><img src="https://img-blog.csdnimg.cn/01cccea40e51431f9ac16af6ec6b0fbd.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAbHl0LXRvcA==,size_12,color_FFFFFF,t_70,g_se,x_16"><h2 id="二级菜单" tabindex="-1">二级菜单 <a class="header-anchor" href="#二级菜单" aria-hidden="true">#</a></h2><div class="tip custom-block"><p class="custom-block-title">二级菜单与一级菜单的区别：（只要子级里有 `children`）</p><ul><li><p>1、redirect：顶级设置重定向</p></li><li><p>2、component：顶级为 <code>component: () =&gt; import(&#39;/@/layout/routerView/parent.vue&#39;)</code> 写死路径。<code>component: () =&gt; import(&#39;/@/layout/routerView/parent.vue&#39;)</code> 为路由出口</p></li></ul></div><p style="font-weight:bold;">一、新建文件夹</p><blockquote><p>1.1、我们按照建 <code>一级菜单</code> 的步骤建 <code>二级菜单</code>。<code>/@/views</code> 下新增 <code>system</code> 文件夹。<code>system</code> 文件夹下新增 <code>menu、user</code> 等文件夹</p></blockquote><img src="https://img-blog.csdnimg.cn/db3d9ea349a146faa5ba857e35f9ca51.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAbHl0LXRvcA==,size_12,color_FFFFFF,t_70,g_se,x_16"><blockquote><p>1.2、为了方便管理，我们在 <code>/@/views/system/menu</code> 或 <code>/@/views/system/user</code> 中都添加 <code>index.vue</code> 组件</p></blockquote><div class="language-ts"><div class="highlight-lines"><br><br><br><br><br><br><br><br><br><br><div class="highlighted"> </div><br><br><br><br><br><br><br><br><br><br><br><br></div><pre><code><span class="token operator">&lt;</span>template<span class="token operator">&gt;</span>
  <span class="token operator">&lt;</span>div <span class="token keyword">class</span><span class="token operator">=</span><span class="token string">&quot;system-menu-container&quot;</span><span class="token operator">&gt;</span>
    systemMenu
    <span class="token operator">...</span>
  <span class="token operator">&lt;</span><span class="token operator">/</span>div<span class="token operator">&gt;</span>
<span class="token operator">&lt;</span><span class="token operator">/</span>template<span class="token operator">&gt;</span>

<span class="token operator">&lt;</span>script lang<span class="token operator">=</span><span class="token string">&quot;ts&quot;</span><span class="token operator">&gt;</span>
<span class="token keyword">import</span> <span class="token punctuation">{</span> reactive<span class="token punctuation">,</span> toRefs<span class="token punctuation">,</span> defineComponent <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;vue&#39;</span><span class="token punctuation">;</span>
<span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token function">defineComponent</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
  name<span class="token operator">:</span> <span class="token string">&#39;systemMenu&#39;</span><span class="token punctuation">,</span>
  <span class="token function">setup</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">const</span> state <span class="token operator">=</span> <span class="token function">reactive</span><span class="token punctuation">(</span><span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token keyword">return</span> <span class="token punctuation">{</span>
      <span class="token operator">...</span><span class="token function">toRefs</span><span class="token punctuation">(</span>state<span class="token punctuation">)</span><span class="token punctuation">,</span>
    <span class="token punctuation">}</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

<span class="token operator">&lt;</span>style scoped lang<span class="token operator">=</span><span class="token string">&quot;scss&quot;</span><span class="token operator">&gt;</span>
<span class="token punctuation">.</span>system<span class="token operator">-</span>menu<span class="token operator">-</span>container <span class="token punctuation">{</span><span class="token punctuation">}</span>
<span class="token operator">&lt;</span><span class="token operator">/</span>style<span class="token operator">&gt;</span>
</code></pre></div><p style="font-weight:bold;">二、新增代码</p><blockquote><p>在项目 <code>/@/router/route.ts</code> 文件中，比如我们上面添加系统设置界面，新增如下代码：代码有点长，可复制粘贴代码到 <a href="https://tool.oschina.net/codeformat/json/" target="_blank" rel="noopener noreferrer">OSCHINA 在线代码格式化</a> 中具体查看</p></blockquote><div class="language-ts"><div class="highlight-lines"><br><br><br><br><br><br><br><br><br><br><br><br><br><br><div class="highlighted"> </div><div class="highlighted"> </div><div class="highlighted"> </div><div class="highlighted"> </div><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br></div><pre><code><span class="token punctuation">{</span>
  path<span class="token operator">:</span> <span class="token string">&#39;/&#39;</span><span class="token punctuation">,</span>
  name<span class="token operator">:</span> <span class="token string">&#39;/&#39;</span><span class="token punctuation">,</span>
  <span class="token function-variable function">component</span><span class="token operator">:</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token keyword">import</span><span class="token punctuation">(</span><span class="token string">&#39;/@/layout/index.vue&#39;</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
  redirect<span class="token operator">:</span> <span class="token string">&#39;/home&#39;</span><span class="token punctuation">,</span>
  meta<span class="token operator">:</span> <span class="token punctuation">{</span>
    isKeepAlive<span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
  children<span class="token operator">:</span> <span class="token punctuation">[</span>
    <span class="token comment">// 新增的菜单对象写在这里</span>
    <span class="token punctuation">{</span>
      path<span class="token operator">:</span> <span class="token string">&#39;/system&#39;</span><span class="token punctuation">,</span>
      name<span class="token operator">:</span> <span class="token string">&#39;system&#39;</span><span class="token punctuation">,</span>
      <span class="token comment">// 2、顶级为 `component: () =&gt; import(&#39;/@/layout/routerView/parent.vue&#39;)` 写死路径</span>
      <span class="token function-variable function">component</span><span class="token operator">:</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token keyword">import</span><span class="token punctuation">(</span><span class="token string">&#39;/@/layout/routerView/parent.vue&#39;</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
      <span class="token comment">// 1、redirect：重定向</span>
      redirect<span class="token operator">:</span> <span class="token string">&#39;/system/menu&#39;</span><span class="token punctuation">,</span>
      meta<span class="token operator">:</span> <span class="token punctuation">{</span>
        title<span class="token operator">:</span> <span class="token string">&#39;message.router.system&#39;</span><span class="token punctuation">,</span>
        isLink<span class="token operator">:</span> <span class="token string">&#39;&#39;</span><span class="token punctuation">,</span>
        isHide<span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span>
        isKeepAlive<span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
        isAffix<span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span>
        isIframe<span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span>
        roles<span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">&#39;admin&#39;</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
        icon<span class="token operator">:</span> <span class="token string">&#39;iconfont icon-xitongshezhi&#39;</span><span class="token punctuation">,</span>
      <span class="token punctuation">}</span><span class="token punctuation">,</span>
      children<span class="token operator">:</span> <span class="token punctuation">[</span>
        <span class="token punctuation">{</span>
          path<span class="token operator">:</span> <span class="token string">&#39;/system/menu&#39;</span><span class="token punctuation">,</span>
          name<span class="token operator">:</span> <span class="token string">&#39;systemMenu&#39;</span><span class="token punctuation">,</span>
          <span class="token function-variable function">component</span><span class="token operator">:</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token keyword">import</span><span class="token punctuation">(</span><span class="token string">&#39;/@/views/system/menu/index.vue&#39;</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
          meta<span class="token operator">:</span> <span class="token punctuation">{</span>
            title<span class="token operator">:</span> <span class="token string">&#39;message.router.systemMenu&#39;</span><span class="token punctuation">,</span>
            isLink<span class="token operator">:</span> <span class="token string">&#39;&#39;</span><span class="token punctuation">,</span>
            isHide<span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span>
            isKeepAlive<span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
            isAffix<span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span>
            isIframe<span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span>
            roles<span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">&#39;admin&#39;</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
            icon<span class="token operator">:</span> <span class="token string">&#39;iconfont icon-caidan&#39;</span><span class="token punctuation">,</span>
          <span class="token punctuation">}</span><span class="token punctuation">,</span>
        <span class="token punctuation">}</span><span class="token punctuation">,</span>
        <span class="token punctuation">{</span>
          path<span class="token operator">:</span> <span class="token string">&#39;/system/user&#39;</span><span class="token punctuation">,</span>
          name<span class="token operator">:</span> <span class="token string">&#39;systemUser&#39;</span><span class="token punctuation">,</span>
          <span class="token function-variable function">component</span><span class="token operator">:</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token keyword">import</span><span class="token punctuation">(</span><span class="token string">&#39;/@/views/system/user/index.vue&#39;</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
          meta<span class="token operator">:</span> <span class="token punctuation">{</span>
            title<span class="token operator">:</span> <span class="token string">&#39;message.router.systemUser&#39;</span><span class="token punctuation">,</span>
            isLink<span class="token operator">:</span> <span class="token string">&#39;&#39;</span><span class="token punctuation">,</span>
            isHide<span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span>
            isKeepAlive<span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
            isAffix<span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span>
            isIframe<span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span>
            roles<span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">&#39;admin&#39;</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
            icon<span class="token operator">:</span> <span class="token string">&#39;iconfont icon-icon-&#39;</span><span class="token punctuation">,</span>
          <span class="token punctuation">}</span><span class="token punctuation">,</span>
        <span class="token punctuation">}</span><span class="token punctuation">,</span>
      <span class="token punctuation">]</span>
    <span class="token punctuation">}</span>
  <span class="token punctuation">]</span>
<span class="token punctuation">}</span>
</code></pre></div><p style="font-weight:bold;">三、界面显示</p><blockquote><p>去 <code>http://localhost:8888/</code> 中查看显示效果，如下：</p></blockquote><img src="https://img-blog.csdnimg.cn/70f38da5ef8b4836b54414f9fb96b028.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAbHl0LXRvcA==,size_12,color_FFFFFF,t_70,g_se,x_16"><h2 id="多级嵌套菜单" tabindex="-1">多级嵌套菜单 <a class="header-anchor" href="#多级嵌套菜单" aria-hidden="true">#</a></h2><div class="tip custom-block"><p class="custom-block-title">多级嵌套菜单与二级菜单的区别：（只要子级里有 `children`）</p><ul><li><p>1、redirect：顶级设置重定向</p></li><li><p>2、component：只要当前级（我们称为顶级）下有子级（<code>children</code>），那么当前级为 <code>component: () =&gt; import(&#39;/@/layout/routerView/parent.vue&#39;)</code> 写死路径</p></li></ul></div><p style="font-weight:bold;">一、新建文件夹</p><blockquote><p>1.1、我们按照建 <code>二级菜单</code> 的步骤建 <code>多级嵌套菜单</code>。<code>/@/views</code> 下新增 <code>menu</code> 文件夹。<code>menu</code> 文件夹下新增 <code>menu1</code> 等文件夹，<code>menu1</code> 文件夹下新增 <code>menu12</code> 等。参考 <a href="https://gitee.com/lyt-top/vue-next-admin/blob/master/src/router/route.ts" target="_blank" rel="noopener noreferrer">route.ts menu 的嵌套格式</a></p></blockquote><img src="https://img-blog.csdnimg.cn/be2073d1e4d84505b1e6ff88140a3403.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAbHl0LXRvcA==,size_12,color_FFFFFF,t_70,g_se,x_16"><blockquote><p>1.2、组件代码参考 <a href="/config/menu/#二级菜单">/config/menu/#二级菜单 1.2</a></p></blockquote><p style="font-weight:bold;">二、新增代码</p><blockquote><p>在项目 <code>/@/router/route.ts</code> 文件中，比如我们上面添加系统设置界面，新增如下代码：代码有点长，可复制粘贴代码到 <a href="https://tool.oschina.net/codeformat/json/" target="_blank" rel="noopener noreferrer">OSCHINA 在线代码格式化</a> 中具体查看</p></blockquote><div class="language-ts"><div class="highlight-lines"><br><br><br><div class="highlighted"> </div><div class="highlighted"> </div><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><div class="highlighted"> </div><div class="highlighted"> </div><br><br><br><br><br><br><br><br><br><br><br><br><br><br><div class="highlighted"> </div><div class="highlighted"> </div><div class="highlighted"> </div><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br></div><pre><code><span class="token punctuation">{</span>
  path<span class="token operator">:</span> <span class="token string">&#39;/menu&#39;</span><span class="token punctuation">,</span>
  name<span class="token operator">:</span> <span class="token string">&#39;menu&#39;</span><span class="token punctuation">,</span>
  <span class="token function-variable function">component</span><span class="token operator">:</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token keyword">import</span><span class="token punctuation">(</span><span class="token string">&#39;/@/layout/routerView/parent.vue&#39;</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
  redirect<span class="token operator">:</span> <span class="token string">&#39;/menu/menu1&#39;</span><span class="token punctuation">,</span>
  meta<span class="token operator">:</span> <span class="token punctuation">{</span>
    title<span class="token operator">:</span> <span class="token string">&#39;message.router.menu&#39;</span><span class="token punctuation">,</span>
    isLink<span class="token operator">:</span> <span class="token string">&#39;&#39;</span><span class="token punctuation">,</span>
    isHide<span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span>
    isKeepAlive<span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
    isAffix<span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span>
    isIframe<span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span>
    roles<span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">&#39;admin&#39;</span><span class="token punctuation">,</span> <span class="token string">&#39;common&#39;</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
    icon<span class="token operator">:</span> <span class="token string">&#39;iconfont icon-caidan&#39;</span><span class="token punctuation">,</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
  children<span class="token operator">:</span> <span class="token punctuation">[</span>
    <span class="token punctuation">{</span>
      path<span class="token operator">:</span> <span class="token string">&#39;/menu/menu1&#39;</span><span class="token punctuation">,</span>
      name<span class="token operator">:</span> <span class="token string">&#39;menu1&#39;</span><span class="token punctuation">,</span>
      <span class="token function-variable function">component</span><span class="token operator">:</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token keyword">import</span><span class="token punctuation">(</span><span class="token string">&#39;/@/layout/routerView/parent.vue&#39;</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
      redirect<span class="token operator">:</span> <span class="token string">&#39;/menu/menu1/menu11&#39;</span><span class="token punctuation">,</span>
      meta<span class="token operator">:</span> <span class="token punctuation">{</span>
        title<span class="token operator">:</span> <span class="token string">&#39;message.router.menu1&#39;</span><span class="token punctuation">,</span>
        isLink<span class="token operator">:</span> <span class="token string">&#39;&#39;</span><span class="token punctuation">,</span>
        isHide<span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span>
        isKeepAlive<span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
        isAffix<span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span>
        isIframe<span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span>
        roles<span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">&#39;admin&#39;</span><span class="token punctuation">,</span> <span class="token string">&#39;common&#39;</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
        icon<span class="token operator">:</span> <span class="token string">&#39;iconfont icon-caidan&#39;</span><span class="token punctuation">,</span>
      <span class="token punctuation">}</span><span class="token punctuation">,</span>
      children<span class="token operator">:</span> <span class="token punctuation">[</span>
        <span class="token punctuation">{</span>
          path<span class="token operator">:</span> <span class="token string">&#39;/menu/menu1/menu12&#39;</span><span class="token punctuation">,</span>
          name<span class="token operator">:</span> <span class="token string">&#39;menu12&#39;</span><span class="token punctuation">,</span>
          <span class="token function-variable function">component</span><span class="token operator">:</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token keyword">import</span><span class="token punctuation">(</span><span class="token string">&#39;/@/layout/routerView/parent.vue&#39;</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
          redirect<span class="token operator">:</span> <span class="token string">&#39;/menu/menu1/menu12/menu121&#39;</span><span class="token punctuation">,</span>
          meta<span class="token operator">:</span> <span class="token punctuation">{</span>
            title<span class="token operator">:</span> <span class="token string">&#39;message.router.menu12&#39;</span><span class="token punctuation">,</span>
            isLink<span class="token operator">:</span> <span class="token string">&#39;&#39;</span><span class="token punctuation">,</span>
            isHide<span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span>
            isKeepAlive<span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
            isAffix<span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span>
            isIframe<span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span>
            roles<span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">&#39;admin&#39;</span><span class="token punctuation">,</span> <span class="token string">&#39;common&#39;</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
            icon<span class="token operator">:</span> <span class="token string">&#39;iconfont icon-caidan&#39;</span><span class="token punctuation">,</span>
          <span class="token punctuation">}</span><span class="token punctuation">,</span>
          children<span class="token operator">:</span> <span class="token punctuation">[</span>
            <span class="token punctuation">{</span>
              path<span class="token operator">:</span> <span class="token string">&#39;/menu/menu1/menu12/menu121&#39;</span><span class="token punctuation">,</span>
              name<span class="token operator">:</span> <span class="token string">&#39;menu121&#39;</span><span class="token punctuation">,</span>
              <span class="token function-variable function">component</span><span class="token operator">:</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token keyword">import</span><span class="token punctuation">(</span><span class="token string">&#39;/@/views/menu/menu1/menu12/menu121/index.vue&#39;</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
              meta<span class="token operator">:</span> <span class="token punctuation">{</span>
                title<span class="token operator">:</span> <span class="token string">&#39;message.router.menu121&#39;</span><span class="token punctuation">,</span>
                isLink<span class="token operator">:</span> <span class="token string">&#39;&#39;</span><span class="token punctuation">,</span>
                isHide<span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span>
                isKeepAlive<span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
                isAffix<span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span>
                isIframe<span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span>
                roles<span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">&#39;admin&#39;</span><span class="token punctuation">,</span> <span class="token string">&#39;common&#39;</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
                icon<span class="token operator">:</span> <span class="token string">&#39;iconfont icon-caidan&#39;</span><span class="token punctuation">,</span>
              <span class="token punctuation">}</span><span class="token punctuation">,</span>
            <span class="token punctuation">}</span><span class="token punctuation">,</span>
          <span class="token punctuation">]</span><span class="token punctuation">,</span>
        <span class="token punctuation">}</span><span class="token punctuation">,</span>
      <span class="token punctuation">]</span>
    <span class="token punctuation">}</span>
  <span class="token punctuation">]</span>
<span class="token punctuation">}</span>
</code></pre></div><p style="font-weight:bold;">三、界面显示</p><blockquote><p>去 <code>http://localhost:8888/</code> 中查看显示效果，如下：</p></blockquote><img src="https://img-blog.csdnimg.cn/94bc62c040884cdab2b0554f5be6ce1b.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAbHl0LXRvcA==,size_12,color_FFFFFF,t_70,g_se,x_16"><h2 id="后端接口菜单" tabindex="-1">后端接口菜单 <a class="header-anchor" href="#后端接口菜单" aria-hidden="true">#</a></h2><p style="font-weight:bold;">一、菜单格式</p><blockquote><p>1.1、前面我们已经说了，<a href="/config/menu/#菜单格式">菜单格式</a>，菜单数据内容必须嵌套进顶级节点的 <code>children</code> 字段里，所以我们后端返回的菜单格式，只需要返回顶级节点 <code>children</code> 数组即可。可以参考 gitee 上模拟的 <a href="https://gitee.com/lyt-top/vue-next-admin-images/blob/master/menu/adminMenu.json" target="_blank" rel="noopener noreferrer">菜单数据格式</a></p></blockquote><div class="language-json"><div class="highlight-lines"><br><br><br><br><br><br><br><div class="highlighted"> </div><div class="highlighted"> </div><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br></div><pre><code><span class="token punctuation">{</span>
  <span class="token property">&quot;code&quot;</span><span class="token operator">:</span> <span class="token number">0</span><span class="token punctuation">,</span>
  <span class="token property">&quot;type&quot;</span><span class="token operator">:</span> <span class="token string">&quot;adminMenu&quot;</span><span class="token punctuation">,</span>
  <span class="token property">&quot;data&quot;</span><span class="token operator">:</span> <span class="token punctuation">[</span>
    <span class="token punctuation">{</span>
      <span class="token property">&quot;path&quot;</span><span class="token operator">:</span> <span class="token string">&quot;/home&quot;</span><span class="token punctuation">,</span>
      <span class="token property">&quot;name&quot;</span><span class="token operator">:</span> <span class="token string">&quot;home&quot;</span><span class="token punctuation">,</span>
      <span class="token property">&quot;component&quot;</span><span class="token operator">:</span> <span class="token string">&quot;home/index&quot;</span><span class="token punctuation">,</span>
      <span class="token property">&quot;meta&quot;</span><span class="token operator">:</span> <span class="token punctuation">{</span>
        <span class="token property">&quot;title&quot;</span><span class="token operator">:</span> <span class="token string">&quot;message.router.home&quot;</span><span class="token punctuation">,</span>
        <span class="token property">&quot;isLink&quot;</span><span class="token operator">:</span> <span class="token string">&quot;&quot;</span><span class="token punctuation">,</span>
        <span class="token property">&quot;isHide&quot;</span><span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span>
        <span class="token property">&quot;isKeepAlive&quot;</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
        <span class="token property">&quot;isAffix&quot;</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
        <span class="token property">&quot;isIframe&quot;</span><span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span>
        <span class="token property">&quot;roles&quot;</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">&quot;admin&quot;</span><span class="token punctuation">,</span> <span class="token string">&quot;common&quot;</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
        <span class="token property">&quot;icon&quot;</span><span class="token operator">:</span> <span class="token string">&quot;iconfont icon-shouye&quot;</span>
      <span class="token punctuation">}</span>
    <span class="token punctuation">}</span><span class="token punctuation">,</span>
    <span class="token punctuation">{</span>
      <span class="token comment">// 其它菜单数据</span>
      ...
    <span class="token punctuation">}</span>
  <span class="token punctuation">]</span>
<span class="token punctuation">}</span>
</code></pre></div><blockquote><p>1.2、需要注意 <code>component</code> 字段为字符串而非函数，上面高亮位置处。这里为什么不写成 <code>&quot;component&quot;: &quot;/home/index.vue&quot;</code>，请继续往下看 <code>二、逻辑处理</code></p></blockquote><div class="language-json"><pre><code><span class="token property">&quot;component&quot;</span><span class="token operator">:</span> <span class="token string">&quot;home/index&quot;</span><span class="token punctuation">,</span>
</code></pre></div><blockquote><p>1.3、<code>component</code> 例子演示，如嵌套菜单（文档已简写，真实请补满其它参数）：</p></blockquote><div class="tip custom-block"><p class="custom-block-title">对比发现</p><ul><li><p>1、layout：以 <code>layout</code> 开头的话，去掉了 <code>/@/</code> 及 <code>.vue</code> 后缀</p></li><li><p>2、views：以 <code>views</code> 开头的话，去掉了 <code>/@/views/</code> 及 <code>.vue</code> 后缀</p></li></ul></div><div class="language-ts"><div class="highlight-lines"><br><br><br><div class="highlighted"> </div><br><br><br><br><div class="highlighted"> </div><br><br><br><br><br><div class="highlighted"> </div><br><br><br><br><br><br><br><br><br><br><div class="highlighted"> </div><br><br><br><br><div class="highlighted"> </div><br><br><br><br><br><div class="highlighted"> </div><br><br><br><br><br></div><pre><code><span class="token comment">// 默认菜单格式</span>
<span class="token punctuation">{</span>
  path<span class="token operator">:</span> <span class="token string">&#39;/menu&#39;</span><span class="token punctuation">,</span>
  <span class="token function-variable function">component</span><span class="token operator">:</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token keyword">import</span><span class="token punctuation">(</span><span class="token string">&#39;/@/layout/routerView/parent.vue&#39;</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
  redirect<span class="token operator">:</span> <span class="token string">&#39;/menu/menu1&#39;</span><span class="token punctuation">,</span>
  children<span class="token operator">:</span> <span class="token punctuation">[</span>
    <span class="token punctuation">{</span>
      path<span class="token operator">:</span> <span class="token string">&#39;/menu/menu1&#39;</span><span class="token punctuation">,</span>
      <span class="token function-variable function">component</span><span class="token operator">:</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token keyword">import</span><span class="token punctuation">(</span><span class="token string">&#39;/@/layout/routerView/parent.vue&#39;</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
      redirect<span class="token operator">:</span> <span class="token string">&#39;/menu/menu1/menu11&#39;</span><span class="token punctuation">,</span>
      children<span class="token operator">:</span> <span class="token punctuation">[</span>
        <span class="token punctuation">{</span>
          path<span class="token operator">:</span> <span class="token string">&#39;/menu/menu1/menu11&#39;</span><span class="token punctuation">,</span>
          name<span class="token operator">:</span> <span class="token string">&#39;menu11&#39;</span><span class="token punctuation">,</span>
          <span class="token function-variable function">component</span><span class="token operator">:</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token keyword">import</span><span class="token punctuation">(</span><span class="token string">&#39;/@/views/menu/menu1/menu11/index.vue&#39;</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
        <span class="token punctuation">}</span><span class="token punctuation">,</span>
      <span class="token punctuation">]</span>
    <span class="token punctuation">}</span>
  <span class="token punctuation">]</span>
<span class="token punctuation">}</span>

<span class="token comment">// 后端返回菜单格式</span>
<span class="token punctuation">{</span>
  path<span class="token operator">:</span> <span class="token string">&#39;/menu&#39;</span><span class="token punctuation">,</span>
  component<span class="token operator">:</span> <span class="token string">&#39;layout/routerView/parent&#39;</span><span class="token punctuation">,</span>
  redirect<span class="token operator">:</span> <span class="token string">&#39;/menu/menu1&#39;</span><span class="token punctuation">,</span>
  children<span class="token operator">:</span> <span class="token punctuation">[</span>
    <span class="token punctuation">{</span>
      path<span class="token operator">:</span> <span class="token string">&#39;/menu/menu1&#39;</span><span class="token punctuation">,</span>
      component<span class="token operator">:</span> <span class="token string">&#39;layout/routerView/parent&#39;</span><span class="token punctuation">,</span>
      redirect<span class="token operator">:</span> <span class="token string">&#39;/menu/menu1/menu11&#39;</span><span class="token punctuation">,</span>
      children<span class="token operator">:</span> <span class="token punctuation">[</span>
        <span class="token punctuation">{</span>
          path<span class="token operator">:</span> <span class="token string">&#39;/menu/menu1/menu11&#39;</span><span class="token punctuation">,</span>
          name<span class="token operator">:</span> <span class="token string">&#39;menu11&#39;</span><span class="token punctuation">,</span>
          component<span class="token operator">:</span> <span class="token string">&#39;menu/menu1/menu11/index&#39;</span><span class="token punctuation">,</span>
        <span class="token punctuation">}</span><span class="token punctuation">,</span>
      <span class="token punctuation">]</span>
    <span class="token punctuation">}</span>
  <span class="token punctuation">]</span>
<span class="token punctuation">}</span>
</code></pre></div><p style="font-weight:bold;">二、逻辑处理</p><blockquote><p>1.1、Glob 导入，Vite 支持使用特殊的 import.<wbr>meta.glob 函数从文件系统导入多个模块。具体查看 <a href="https://vitejs.cn/guide/features.html#glob-import" target="_blank" rel="noopener noreferrer">vite Glob 导入文档</a>。后端控制逻辑代码 <a href="https://gitee.com/lyt-top/vue-next-admin/blob/master/src/router/backEnd.ts" target="_blank" rel="noopener noreferrer">/@/router/backEnd.ts</a></p></blockquote><div class="language-ts"><pre><code><span class="token keyword">const</span> layouModules<span class="token operator">:</span> <span class="token builtin">any</span> <span class="token operator">=</span> <span class="token keyword">import</span><span class="token punctuation">.</span>meta<span class="token punctuation">.</span><span class="token function">glob</span><span class="token punctuation">(</span><span class="token string">&quot;../layout/routerView/*.{vue,tsx}&quot;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token keyword">const</span> viewsModules<span class="token operator">:</span> <span class="token builtin">any</span> <span class="token operator">=</span> <span class="token keyword">import</span><span class="token punctuation">.</span>meta<span class="token punctuation">.</span><span class="token function">glob</span><span class="token punctuation">(</span><span class="token string">&quot;../views/**/*.{vue,tsx}&quot;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre></div><blockquote><p>1.2、把 component 中的路径字符串转成实际组件地址，通过以下方法进行转换</p></blockquote><div class="language-ts"><pre><code><span class="token comment">/**
 * 后端路由 component 转换
 * @param routes 后端返回的路由表数组
 * @returns 返回处理成函数后的 component
 */</span>
<span class="token keyword">export</span> <span class="token keyword">function</span> <span class="token function">backEndComponent</span><span class="token punctuation">(</span>routes<span class="token operator">:</span> <span class="token builtin">any</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token operator">!</span>routes<span class="token punctuation">)</span> <span class="token keyword">return</span><span class="token punctuation">;</span>
  <span class="token keyword">return</span> routes<span class="token punctuation">.</span><span class="token function">map</span><span class="token punctuation">(</span><span class="token punctuation">(</span>item<span class="token operator">:</span> <span class="token builtin">any</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
    <span class="token keyword">if</span> <span class="token punctuation">(</span>item<span class="token punctuation">.</span>component<span class="token punctuation">)</span>
      item<span class="token punctuation">.</span>component <span class="token operator">=</span> <span class="token function">dynamicImport</span><span class="token punctuation">(</span>
        dynamicViewsModules<span class="token punctuation">,</span>
        item<span class="token punctuation">.</span>component <span class="token keyword">as</span> <span class="token builtin">string</span>
      <span class="token punctuation">)</span><span class="token punctuation">;</span>
    item<span class="token punctuation">.</span>children <span class="token operator">&amp;&amp;</span> <span class="token function">backEndComponent</span><span class="token punctuation">(</span>item<span class="token punctuation">.</span>children<span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token keyword">return</span> item<span class="token punctuation">;</span>
  <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>

<span class="token comment">/**
 * 后端路由 component 转换函数
 * @param dynamicViewsModules 获取目录下的 .vue、.tsx 全部文件
 * @param component 当前要处理项 component
 * @returns 返回处理成函数后的 component
 */</span>
<span class="token keyword">export</span> <span class="token keyword">function</span> <span class="token function">dynamicImport</span><span class="token punctuation">(</span>
  dynamicViewsModules<span class="token operator">:</span> Record<span class="token operator">&lt;</span><span class="token builtin">string</span><span class="token punctuation">,</span> <span class="token builtin">Function</span><span class="token operator">&gt;</span><span class="token punctuation">,</span>
  component<span class="token operator">:</span> <span class="token builtin">string</span>
<span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token keyword">const</span> keys <span class="token operator">=</span> Object<span class="token punctuation">.</span><span class="token function">keys</span><span class="token punctuation">(</span>dynamicViewsModules<span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token keyword">const</span> matchKeys <span class="token operator">=</span> keys<span class="token punctuation">.</span><span class="token function">filter</span><span class="token punctuation">(</span><span class="token punctuation">(</span>key<span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
    <span class="token keyword">const</span> k <span class="token operator">=</span> key<span class="token punctuation">.</span><span class="token function">replace</span><span class="token punctuation">(</span><span class="token regex"><span class="token regex-delimiter">/</span><span class="token regex-source language-regex">..\/views|..</span><span class="token regex-delimiter">/</span></span><span class="token punctuation">,</span> <span class="token string">&quot;&quot;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token keyword">return</span> k<span class="token punctuation">.</span><span class="token function">startsWith</span><span class="token punctuation">(</span><span class="token template-string"><span class="token template-punctuation string">`</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>component<span class="token interpolation-punctuation punctuation">}</span></span><span class="token template-punctuation string">`</span></span><span class="token punctuation">)</span> <span class="token operator">||</span> k<span class="token punctuation">.</span><span class="token function">startsWith</span><span class="token punctuation">(</span><span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">/</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>component<span class="token interpolation-punctuation punctuation">}</span></span><span class="token template-punctuation string">`</span></span><span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token keyword">if</span> <span class="token punctuation">(</span>matchKeys<span class="token operator">?.</span>length <span class="token operator">===</span> <span class="token number">1</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">const</span> matchKey <span class="token operator">=</span> matchKeys<span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
    <span class="token keyword">return</span> dynamicViewsModules<span class="token punctuation">[</span>matchKey<span class="token punctuation">]</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span>
  <span class="token keyword">if</span> <span class="token punctuation">(</span>matchKeys<span class="token operator">?.</span>length <span class="token operator">&gt;</span> <span class="token number">1</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">return</span> <span class="token boolean">false</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span>
</code></pre></div><blockquote><p>1.3、转换完成再重新赋值给 <a href="/config/menu/#菜单格式">菜单格式</a>，<code>children</code> 字段里</p></blockquote><div class="language-ts"><pre><code><span class="token comment">// res.data 为链接</span>
<span class="token comment">// https://gitee.com/lyt-top/vue-next-admin/blob/master/src/router/backEnd.ts</span>
<span class="token comment">// 的菜单模拟数据</span>
<span class="token keyword">const</span> dynamicRoutes <span class="token operator">=</span> <span class="token keyword">await</span> <span class="token function">backEndComponent</span><span class="token punctuation">(</span>res<span class="token punctuation">.</span>data<span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre></div></div></div><footer class="page-footer" data-v-1c2e469b data-v-0673e034><div class="edit" data-v-0673e034><div class="edit-link" data-v-0673e034 data-v-8a069728><a class="link" href="https://gitee.com/lyt-top/vue-next-admin-doc/edit/master/config/menu/index.md" target="_blank" rel="noopener noreferrer" data-v-8a069728>欢迎到 Gitee 上编辑此页！ <svg class="icon outbound icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15" data-v-8a069728><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></div></div><div class="updated" data-v-0673e034><p class="last-updated" data-v-0673e034 data-v-90112f00><span class="prefix" data-v-90112f00>上次更新:</span><span class="datetime" data-v-90112f00></span></p></div></footer><div class="next-and-prev-link" data-v-1c2e469b data-v-7587c728><div class="container" data-v-7587c728><div class="prev" data-v-7587c728><a class="link" href="/vue-next-admin-doc-preview/config/" data-v-7587c728><svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" class="icon icon-prev" data-v-7587c728><path d="M19,11H7.4l5.3-5.3c0.4-0.4,0.4-1,0-1.4s-1-0.4-1.4,0l-7,7c-0.1,0.1-0.2,0.2-0.2,0.3c-0.1,0.2-0.1,0.5,0,0.8c0.1,0.1,0.1,0.2,0.2,0.3l7,7c0.2,0.2,0.5,0.3,0.7,0.3s0.5-0.1,0.7-0.3c0.4-0.4,0.4-1,0-1.4L7.4,13H19c0.6,0,1-0.4,1-1S19.6,11,19,11z"></path></svg><span class="text" data-v-7587c728>简介</span></a></div><div class="next" data-v-7587c728><a class="link" href="/vue-next-admin-doc-preview/config/layoutConfig/" data-v-7587c728><span class="text" data-v-7587c728>布局配置</span><svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" class="icon icon-next" data-v-7587c728><path d="M19.9,12.4c0.1-0.2,0.1-0.5,0-0.8c-0.1-0.1-0.1-0.2-0.2-0.3l-7-7c-0.4-0.4-1-0.4-1.4,0s-0.4,1,0,1.4l5.3,5.3H5c-0.6,0-1,0.4-1,1s0.4,1,1,1h11.6l-5.3,5.3c-0.4,0.4-0.4,1,0,1.4c0.2,0.2,0.5,0.3,0.7,0.3s0.5-0.1,0.7-0.3l7-7C19.8,12.6,19.9,12.5,19.9,12.4z"></path></svg></a></div></div></div><!--[--><!--]--></div></main></div><!----><!--]--></div>
    <script>__VP_HASH_MAP__ = JSON.parse("{\"config_build_index.md\":\"cf908e9c\",\"config_builtplug_index.md\":\"6fbdc8f3\",\"config_charts_index.md\":\"6b253f7e\",\"config_directive_index.md\":\"eca8fc0a\",\"config_i18n_index.md\":\"52f920f7\",\"config_iconfont_index.md\":\"873ceaa3\",\"config_index.md\":\"17f09bd6\",\"config_layoutconfig_index.md\":\"713fd6e3\",\"config_menu_index.md\":\"ba743976\",\"config_otherissues_index.md\":\"bd715eeb\",\"config_partyplug_index.md\":\"99e0e69a\",\"config_power_index.md\":\"9b5ee6e9\",\"config_route_index.md\":\"0855307d\",\"config_server_index.md\":\"895abd2b\",\"config_support_index.md\":\"ba13e927\",\"config_tagsview_index.md\":\"7f3b9bdb\",\"config_tool_index.md\":\"b5e28201\",\"config_vuex_index.md\":\"0fa37ee1\",\"home_compatible_index.md\":\"7fe73f8e\",\"home_doc_index.md\":\"d5c819dd\",\"home_eslint_index.md\":\"de668d54\",\"home_fast_index.md\":\"716712dd\",\"home_forpeople_index.md\":\"8510cbe7\",\"home_gitpush_index.md\":\"d077e28a\",\"home_index.md\":\"1ee95fc1\",\"home_install_index.md\":\"41dfc4c6\",\"home_introduce_index.md\":\"4950d882\",\"home_prettier_index.md\":\"c5b741b5\",\"home_thank_index.md\":\"b63e2205\",\"home_vscode_index.md\":\"fc526584\",\"index.md\":\"56b80810\"}")</script>
    <script type="module" async src="/vue-next-admin-doc-preview/assets/app.9cc95a61.js"></script>
    
  </body>
</html>